<template>
    <div class="main" @touchmove.prevent>
        <ul>
            <li v-for="item in arr" :key="item.id">
                <img :src="$url+'/'+item.img" alt />
                <br />
                {{item.title}} 价格：{{item.price}}元
                <br />
                <router-link :to="'/detail?id='+item.id">详情</router-link>
                <br />
                <br />
            </li>
        </ul>
    </div>
</template>

<script>
import IScroll from "iscroll";
export default {
    name:"shop",
    data() {
        return {
            arr: [],
            p:1
        };
    },
    methods: {
        iscrollRefresh(){
            setTimeout(() => {
                this.myIscroll.refresh();
            }, 0);
        },
        async refresh(){
            var { data } = await this.$axios.get(this.$url + "/goods?_page=1&_limit=4");
            this.arr = data;
            this.iscrollRefresh();
        },
        async more(){
            this.p++;
            var { data } = await this.$axios.get(this.$url + "/goods?_page="+this.p+"&_limit=4");
            this.arr = [...this.arr,...data];
            this.iscrollRefresh();            
        }
    },
    async mounted() {
        var { data } = await this.$axios.get(this.$url + "/goods?_page=1&_limit=4");
        this.arr = data;
        setTimeout(() => {
            var myIscroll = new IScroll(".main");
            this.myIscroll = myIscroll;
            myIscroll.on("scrollEnd", async () => {
                var ulh = document.querySelector(".main>ul").offsetHeight;
                var divh = document.querySelector(".main").clientHeight;
                if (myIscroll.y === 0) {
                    console.log("到顶了");
                    this.refresh();
                }
                if (myIscroll.y == divh - ulh) {
                    console.log("到底了");
                    this.more();
                }
            });
        }, 500);
    }
};
</script>

<style lang='scss' scoped>
</style>